﻿@section header {
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.regModel('Carlendar', {
                fields: [
                    { name: 'ID', type: 'string' },
                    { name: 'day', type: 'date', dateFormat: 'MS' },
                    { name: 'Name', type: 'string' },
                    { name: 'Content', type: 'string' },
                    { name: 'StartTime', type: 'date', dateFormat: 'MS' },
                    { name: 'FinishTime', type: 'date', dateFormat: 'MS' },
                    { name: 'Type', type: 'string' },
                    { name: 'Master', type: 'string' },
                    { name: 'Proctor', type: 'string' }
            ]
            });

            Ext.regModel('eventState', {
                fields: [
                    { name: 'ID', type: 'string' },
                    { name: 'StateTime', type: 'date', dateFormat: 'MS' },
                    { name: 'PlanRadio', type: 'float' },
                    { name: 'AcutalRadio', type: 'float' },
                    { name: 'Description', type: 'string' },
                    { name: 'CreateTime', type: 'date', dateFormat: 'MS' },
                    { name: 'Creator', type: 'string' }
            ]
            });

            var stateStore = new Ext.data.Store({
                model: 'eventState',
                proxy: {
                    type: 'ajax',
                    url: '/data/Carlendar/state'
                },
                listeners: {
                    load: function (store, records, successful) {
                        if (!successful) {
                            alert("Error!");
                        }
                        else {
                        }
                    }
                }
            });

            Ext.regModel('eventRemind', {
                fields: [
                    { name: 'ID', type: 'string' },
                    { name: 'RemindTime', type: 'date', dateFormat: 'MS' },
                    { name: 'RemindContent', type: 'string' },
                    { name: 'ReceiverType', type: 'string' },
                    { name: 'SendTime', type: 'date', dateFormat: 'MS' }
            ]
            });

            var remindStore = new Ext.data.Store({
                model: 'eventRemind',
                proxy: {
                    type: 'ajax',
                    url: '/data/Carlendar/remind'
                },
                listeners: {
                    load: function (store, records, successful) {
                        if (!successful) {
                            alert("Error!");
                        }
                        else {
                        }
                    }
                }
            });

            Ext.regModel('eventShare', {
                fields: [
                    { name: 'ID', type: 'string' },
                    { name: 'Subject', type: 'string' },
                    { name: 'NeedRemind', type: 'boolean' }
            ]
            });

            var shareStore = new Ext.data.Store({
                model: 'eventShare',
                proxy: {
                    type: 'ajax',
                    url: '/data/Carlendar/share'
                },
                listeners: {
                    load: function (store, records, successful) {
                        //debugger;
                        if (!successful) {
                            alert("Error!");
                        }
                        else {
                        }
                    }
                }
            });

            var store = new Ext.data.Store({
                model: 'Carlendar',
                proxy: {
                    type: 'ajax',
                    url: '/data/Carlendar/index',
                    extraParams: {
                        from: new Date(new Date().getYear(), new Date().getMonth(), 1),
                        to: new Date(new Date(new Date().getYear(), new Date().getMonth() + 1, 1) - 1000)
                    }
                },
                listeners: {
                    load: function (store, records, successful) {
                        if (!successful) {
                            alert("Error!");
                        }
                        else {

                        }
                    }
                },
                groupField: 'day',
                autoLoad: true
            });

            var grid = new Ext.grid.Panel({
                region: 'center',
                id: 'EventGrid',
                flex: 2,
                store: store,
                features: [{
                    ftype: 'grouping',
                    groupHeaderTpl: '日期: {name:date("Y年m月d日")} {name:date("l")}'
                }],
                //                selModel: new Ext.selection.CheckboxModel({
                //                    checkOnly: true,
                //                    listeners: {
                //                        select: function (RowSelectionModel, record, index) { alert(index) },
                //                        deselect: function (RowSelectionModel, record, index) { alert(index) }
                //                    }
                //                }),
                columns: [
                    new Ext.grid.RowNumberer(),
                    {
                        text: '日期',
                        dataIndex: 'day',
                        width: 100,
                        renderer: Ext.util.Format.dateRenderer('Y-m-d')
                    },
                    {
                        xtype: 'templatecolumn',
                        text: '标题',
                        tpl: '<a href="javascript:alert(\'{ID}\')">{Name}</a>',
                        flex: 1
                    },
                /*{
                text: '内容',
                dataIndex: 'Content',
                flex: 1
                },*/
                    {
                    text: '开始时间',
                    dataIndex: 'StartTime',
                    width: 120,
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                },
                    {
                        text: '完成时间',
                        dataIndex: 'FinishTime',
                        width: 120,
                        renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                    },
                    {
                        text: '类型',
                        dataIndex: 'Type',
                        width: 70
                    },
                    {
                        text: '责任人',
                        dataIndex: 'Master',
                        width: 60
                    },
                    {
                        text: '督办人',
                        dataIndex: 'Proctor',
                        width: 60
                    },
                    {
                        xtype: 'actioncolumn',
                        header: '操作',
                        width: 70,
                        align: 'center',
                        dataIndex: 'ID',
                        items: [{
                            icon: '/content/images/cog_edit.png',  // Use a URL in the icon config 
                            tooltip: 'Edit',
                            iconCls: 'actioncolumn',
                            handler: function (grid, rowIndex, colIndex) {
                                alert('暂未实现!');
                                //debugger;
                                //var rec = grid.getStore().getAt(rowIndex);
                                //MemoNewOrEdit(rec.get('ID'));
                            }
                        }, {
                            icon: '/content/images/delete.gif',
                            tooltip: 'Delete',
                            iconCls: 'actioncolumn',
                            handler: function (grid, rowIndex, colIndex) {
                                alert('暂未实现!');
                            }
                        }]
                    }
                    ],
                listeners: {
                    selectionchange: function (sm, selectedRecords) {
                        if (selectedRecords.length) {
                            //Ext.getCmp('DetailPanel').setTitle(selectedRecords[0].data.Name + ' - 详细内容');
                            bookTpl.overwrite(Ext.getCmp('baseDetail').body, selectedRecords[0].data);
                            stateStore.load({ params: { ID: selectedRecords[0].data.ID} });
                            remindStore.load({ params: { ID: selectedRecords[0].data.ID} });
                            shareStore.load({ params: { ID: selectedRecords[0].data.ID} });
                        }
                    }
                },
                tbar: [
                    { xtype: 'button', iconCls: 'iconNew', tooltip: '新增',  handler: function (source, e) { EventNewOrEdit() } },
                    { xtype: 'button', iconCls: 'iconDelete', text: '', tooltip: '删除',  handler: function (source, e) { } },
                    { xtype: 'tbseparator' },
                    { xtype: 'tbfill' },
                    { xtype: 'datefield', id: 'from', fieldLabel: '从', labelWidth: 20, width: 140, value: new Date(new Date().getYear(), new Date().getMonth(), 1) },
                    { xtype: 'checkboxfield', id: 'toValid', width: 30, margin: '0 0 0 10' },
                    { xtype: 'datefield', id: 'to', fieldLabel: '到', labelWidth: 20, width: 140, value: new Date(new Date(new Date().getYear(), new Date().getMonth() + 1, 1) - 1000) },
                /*{
                xtype: 'combo',
                id: 'comboYear',
                fieldLabel: 'Choose State',
                store: new Ext.data.Store({
                fields: ['year'],
                data: [
                { year: '2010' },
                { year: '2011' }
                ]
                }),
                queryMode: 'local',
                displayField: 'year',
                valueField: 'year',
                value: new Date().getYear().toString(),
                fieldLabel: '选择年份',
                labelWidth: 60,
                labelAlign: 'right',
                width: 130
                },
                {
                xtype: 'combo',
                id: 'comboMonth',
                fieldLabel: 'Choose State',
                margin: '0 0 0 10',
                store: new Ext.data.Store({
                fields: ['month'],
                data: [
                { month: '1月' },
                { month: '2月' },
                { month: '3月' },
                { month: '4月' },
                { month: '5月' },
                { month: '6月' },
                { month: '7月' },
                { month: '8月' },
                { month: '9月' },
                { month: '10月' },
                { month: '11月' },
                { month: '12月' }
                ]
                }),
                queryMode: 'local',
                displayField: 'month',
                valueField: 'month',
                value: (new Date().getMonth() + 1).toString() + '月',
                fieldLabel: '选择月份',
                labelWidth: 60,
                labelAlign: 'right',
                width: 120
                },*/
                    {
                    xtype: 'button',
                    id: 'btnQuery',
                    iconCls: 'iconSearch',
                    margin: '0 0 0 10',
                    text: '',
                    tooltip: '查询',
                    
                    handler: function (source, e) {
                        query(source);
                    }
                },
                    { xtype: 'tbseparator' },
                    {
                        xtype: 'button',
                        iconCls: 'iconRefresh',
                        text: '',
                        tooltip: '刷新',
                        
                        handler: function (source, e) {
                            query(source);
                        }
                    }
                    ]
            });

            var EventNewOrEdit = function (id) {
                new Ext.window.Window({
                    id: 'fwin',
                    title: '事件信息',
                    modal: true,
                    closable: true,
                    //animateTarget: this,
                    width: 600,
                    //height: 500,
                    layout: 'fit',
                    bodyPadding: 0,
                    items: [
                        new MB.form.Event({
                            id: id,
                            close: function () { Ext.getCmp('fwin').close(); },
                            submitSccess: function (form, action) { alert("submitSccess"); this.close(); },
                            submitFailure: function (form, action) { alert("submitFailure"); }
                        })
                    ]
                }).show();
            }

            var EventShareNewOrEdit = function (eventId, id) {
                new Ext.window.Window({
                    id: 'EventShareWin',
                    title: '事件共享',
                    modal: true,
                    closable: true,
                    //animateTarget: this,
                    width: 400,
                    //height: 500,
                    layout: 'fit',
                    bodyPadding: 0,
                    items: [
                        new MB.form.EventShare({
                            eventId: eventId,
                            id: id,
                            close: function () { Ext.getCmp('EventShareWin').close(); },
                            submitSccess: function (form, action) {
                                Ext.getCmp('shareGrid').getStore().load({
                                    params: {
                                        ID: Ext.getCmp('EventGrid').selModel.getSelection()[0].data.ID
                                    }
                                });
                                this.close();
                            },
                            submitFailure: function (form, action) { alert("submitFailure"); }
                        })
                    ]
                }).show();
            }

            var EventRemindNewOrEdit = function (eventId, id) {
                new Ext.window.Window({
                    id: 'EventRemindWin',
                    title: '事件提醒',
                    modal: true,
                    closable: true,
                    //animateTarget: this,
                    width: 600,
                    //height: 500,
                    layout: 'fit',
                    bodyPadding: 0,
                    items: [
                        new MB.form.EventRemind({
                            eventId: eventId,
                            id: id,
                            close: function () { Ext.getCmp('EventRemindWin').close(); },
                            submitSccess: function (form, action) {
                                Ext.getCmp('remindGrid').getStore().load({
                                    params: {
                                        ID: Ext.getCmp('EventGrid').selModel.getSelection()[0].data.ID
                                    }
                                });
                                this.close();
                            },
                            submitFailure: function (form, action) { alert("submitFailure"); }
                        })
                    ]
                }).show();
            }

            var EventStateNewOrEdit = function (eventId, id) {
                new Ext.window.Window({
                    id: 'EventStateWin',
                    title: '事件状态',
                    modal: true,
                    closable: true,
                    //animateTarget: this,
                    width: 600,
                    //height: 500,
                    layout: 'fit',
                    bodyPadding: 0,
                    items: [
                        new MB.form.EventState({
                            eventId: eventId,
                            id: id,
                            close: function () { Ext.getCmp('EventStateWin').close(); },
                            submitSccess: function (form, action) {
                                Ext.getCmp('stateGrid').getStore().load({
                                    params: {
                                        ID: Ext.getCmp('EventGrid').selModel.getSelection()[0].data.ID
                                    }
                                });
                                this.close();
                            },
                            submitFailure: function (form, action) { alert("submitFailure"); }
                        })
                    ]
                }).show();
                }

                var EventStateShow = function () {
                    new Ext.window.Window({
                        id: 'EventStateWin',
                        title: '事件状态',
                        modal: true,
                        closable: true,
                        //animateTarget: this,
                        width: 600,
                        height: 500,
                        layout: 'fit',
                        bodyPadding: 0,
                        items: [
                             {
                                 xtype: 'chart',
                                 store: stateStore,
                                 shadow: true,
                                 animate: true,
                                 width: '100%',
                                 flex: 1,
                                 axes: [{
                                     type: 'Numeric',
                                     position: 'left',
                                     fields: ['PlanRadio', 'AcutalRadio'],
                                     label: {
                                         renderer: Ext.util.Format.numberRenderer('0,0')
                                     },
                                     title: '任务状态',
                                     grid: true,
                                     minimum: 0
                                 }, {
                                     type: 'Category',
                                     position: 'bottom',
                                     fields: ['StateTime']
                                 }],
                                 series: [{
                                     type: 'column',
                                     axis: 'left',
                                     highlight: true,
                                     tips: {
                                         trackMouse: true,
                                         width: 140,
                                         height: 28,
                                         renderer: function (storeItem, item) {
                                             this.setTitle(storeItem.get('StateTime') + ': ' + storeItem.get('PlanRadio') + ' /' + storeItem.get('AcutalRadio'));
                                         }
                                     },
                                     label: {
                                         display: 'insideEnd',
                                         'text-anchor': 'middle',
                                         field: 'data1',
                                         renderer: Ext.util.Format.numberRenderer('0'),
                                         orientation: 'vertical',
                                         color: '#333'
                                     },
                                     xField: 'StateTime',
                                     yField: ['PlanRadio', 'AcutalRadio']
                                 }]
                             }
                    ]
                    }).show();
                }

            function query(source) {
                //debugger;
                var from = source.ownerCt.items.get('from').value;
                var to = source.ownerCt.items.get('to').value;
                from = from ? from : new Date().toDateString();
                to = to ? to : new Date().toDateString();
                //month = month.substring(0, month.length - 1);
                //debugger;
                //alert(source.ownerCt.items.get('selfGrid_name').value);
                source.up('panel').getStore().load({ params: { from: from, to: to} });
            }

            var bookTplMarkup = [
                '<div style="border:solid 1px #EEE;padding:4px; background:url(/content/images/event.png) no-repeat 4px 1px; padding-left:60px;background-color:#EFEFEF;">',
                '<span style="display:block; padding:4px;">标题:&nbsp;&nbsp;{Name}</span>',
                '<span style="display:block; padding:4px;">开始时间:&nbsp;&nbsp;{StartTime:date(\"Y-m-d H:i:s\")}',
                '<span style="display:inline-block; width:40px; padding:4px;"></span>结束时间:&nbsp;&nbsp;{FinishTime:date(\"Y-m-d H:i:s\")}</span>',
                '</div>',
                '<div style="border:solid 0px #CCC;padding:4; margin-top: 10px;">{Content}</div>',
            ];

            var bookTpl = Ext.create('Ext.Template', bookTplMarkup);

            var panel = Ext.create('Ext.panel.Panel', {
                region: 'center',
                layout: 'border',
                autoScroll: true,
                autoHeight: true,
                bodyPadding: 0,
                padding: 0,
                margin: 0,
                items: [
                    {
                        region: 'center',
                        xtype: 'container',
                        layout: 'border',
                        flex: 2,
                        items: [
                            grid,
                            {
                                region: 'south',
                                xtype: 'panel',
                                id: 'baseDetail',
                                title: '事件基本信息',
                                flex: 1,
                                bodyPadding: 10,
                                split: true
                            }]
                    },
                    {
                        region: 'east',
                        xtype: 'container',
                        layout: 'border',
                        flex: 1,
                        split: true,
                        items: [
                        {
                            region: 'north',
                            xtype: 'grid',
                            id: 'stateGrid',
                            store: stateStore,
                            flex: 1,
                            title: '状态信息',
                            split: true,
                            columns: [{
                                header: '状态时间',
                                dataIndex: 'StateTime',
                                width: 100,
                                renderer: Ext.util.Format.dateRenderer('Y-m-d H:i')
                            },
                            {
                                header: '计划完成',
                                dataIndex: 'PlanRadio',
                                flex: 3,
                                renderer: function (v) { return Math.round(v * 100) + '%' }
                            },
                            {
                                header: '实际完成',
                                dataIndex: 'AcutalRadio',
                                flex: 3,
                                renderer: function (v) { return Math.round(v * 100) + '%' }
                            },
                            {
                                header: '描述',
                                dataIndex: 'Description',
                                flex: 3
                            }
                            ],
                            tbar: [
                                { xtype: 'button', iconCls: 'iconNew', tooltip: '新增',  handler: function (source, e) { EventStateNewOrEdit(Ext.getCmp('EventGrid').selModel.getSelection()[0].data.ID) } },
                                { xtype: 'button', iconCls: 'iconDelete', text: '', tooltip: '删除', handler: function (source, e) { } },
                                { xtype: 'tbseparator' },
                                { xtype: 'button', iconCls: 'iconChart', text: '', tooltip: '查看图表', handler: function (source, e) { EventStateShow() } },
                                { xtype: 'tbfill' },
                                { xtype: 'tbseparator' },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconRefresh',
                                    text: '',
                                    tooltip: '刷新',
                                    
                                    handler: function (source, e) {
                                        this.up('panel').getStore().load({
                                            params: { ID: Ext.getCmp('EventGrid').selModel.getSelection()[0].data.ID }
                                        });
                                    }
                                }
                                ]
                        },
                        {
                            region: 'center',
                            xtype: 'grid',
                            id: 'remindGrid',
                            store: remindStore,
                            flex: 1,
                            title: '提醒信息',
                            columns: [{
                                header: '提醒时间',
                                dataIndex: 'RemindTime',
                                width: 100,
                                renderer: Ext.util.Format.dateRenderer('Y-m-d H:i')
                            },
                            {
                                header: '提醒内容',
                                dataIndex: 'RemindContent',
                                flex: 3
                            },
                            {
                                header: '接收类型',
                                dataIndex: 'ReceiverType',
                                flex: 3
                            },
                            {
                                header: '发送时间',
                                dataIndex: 'SendTime',
                                flex: 3,
                                renderer: Ext.util.Format.dateRenderer('Y-m-d')
                            }
                            ],
                            tbar: [
                                { xtype: 'button', iconCls: 'iconNew', tooltip: '新增',  handler: function (source, e) { EventRemindNewOrEdit(Ext.getCmp('EventGrid').selModel.getSelection()[0].data.ID) } },
                                { xtype: 'button', iconCls: 'iconDelete', text: '', tooltip: '删除',  handler: function (source, e) { } },
                                { xtype: 'tbseparator' },
                                { xtype: 'tbfill' },
                                { xtype: 'tbseparator' },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconRefresh',
                                    text: '',
                                    tooltip: '刷新',
                                    
                                    handler: function (source, e) {
                                        this.up('panel').getStore().load({
                                            params: { ID: Ext.getCmp('EventGrid').selModel.getSelection()[0].data.ID }
                                        });
                                    }
                                }
                                ]
                        },
                        {
                            region: 'south',
                            xtype: 'grid',
                            id: 'shareGrid',
                            store: shareStore,
                            flex: 1,
                            title: '共享信息',
                            split: true,
                            columns: [
                            {
                                header: '共享给',
                                dataIndex: 'Subject',
                                flex: 3
                            },
                            {
                                header: '需要提醒',
                                dataIndex: 'NeedRemind',
                                flex: 3,
                                renderer: function (v) { return v ? '是' : '否'; }
                            }
                            ],
                            tbar: [
                                { xtype: 'button', iconCls: 'iconNew', tooltip: '新增',  handler: function (source, e) { EventShareNewOrEdit(Ext.getCmp('EventGrid').selModel.getSelection()[0].data.ID) } },
                                { xtype: 'button', iconCls: 'iconDelete', text: '', tooltip: '删除',  handler: function (source, e) { } },
                                { xtype: 'tbseparator' },
                                { xtype: 'tbfill' },
                                { xtype: 'tbseparator' },
                                {
                                    xtype: 'button',
                                    iconCls: 'iconRefresh',
                                    text: '',
                                    tooltip: '刷新',
                                    
                                    handler: function (source, e) {
                                        this.up('panel').getStore().load({
                                            params: { ID: Ext.getCmp('EventGrid').selModel.getSelection()[0].data.ID }
                                        });
                                    }
                                }
                                ]
                        }]
                    }
                ],
                tbar: [
                    { xtype: 'label', text: '当前位置：个人办公 -> 我的日程(月视图)', cls: 'formNav' },
                    { xtype: 'tbseparator' },
                    { xtype: 'tbfill' },
                    { xtype: 'button', iconCls: 'helpIcon', text: '月视图', tooltip: '帮助',  handle: function (source, e) { alert('帮助!') } },
                    { xtype: 'button', iconCls: 'helpIcon', text: '周视图',  handle: function (source, e) { alert('帮助!') } },
                    { xtype: 'button', iconCls: 'helpIcon', text: '日视图',  handle: function (source, e) { alert('帮助!') } },
                    { xtype: 'tbseparator' },
                    { xtype: 'button', iconCls: 'helpIcon', tooltip: '帮助',  handle: function (source, e) { alert('帮助!') } }
                    ]
            });

            new Ext.container.Viewport({
                xtype: 'panel',
                layout: 'fit',
                border: 0,
                items: [panel]
            });
        });
    </script>
}
